"use client"
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { atom, useAtom, useAtomValue } from "jotai";
import Image from "next/image";
import { QRCodeSVG } from 'qrcode.react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect } from "react";
import { DeviceVersion, Model } from "./model_version";
import { atomWithStorage } from "jotai/utils";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";


const modelAtom = atomWithStorage("model", Model.P0)
const snAtom = atom<string>("")
const devVersionAtom = atomWithStorage("devVersion", DeviceVersion.Oversea)
const qrCodeAtom = atom(
  (get) => {
    const sn = get(snAtom)
    if (!sn) return "";
    const devVersion = get(devVersionAtom)
    const model = get(modelAtom)
    switch (model) {
      case Model.P0:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.pick-fun.com.cn/download.html?mac=&m=0&s=${sn}`
          case DeviceVersion.Oversea:
            return `https://h5.pick-fun.com/download.html?mac=&m=0&s=${sn}`
        }
      case Model.P1:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.pick-fun.com.cn/download.html?mac=&sn=${sn}`
          case DeviceVersion.Oversea:
            return `https://www.pick-fun.com/qrcode/device/bottom?mac=&sn=${sn}`
        }
      case Model.P3:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.pick-fun.com.cn/download.html?mac=&m=3&s=${sn}`
          case DeviceVersion.Oversea:
            return `https://h5.pick-fun.com/download.html?mac=&m=3&s=${sn}`
        }
      case Model.A3:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.pick-fun.com.cn/download.html?mac=&m=a3&s=${sn}`
          case DeviceVersion.Oversea:
            return `https://h5.pick-fun.com/download.html?mac=&m=a3&s=${sn}`
        }
      case Model.E0:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.pick-fun.com.cn/download.html?mac=&m=e0&s=${sn}`
          case DeviceVersion.Oversea:
            return `https://h5.pick-fun.com/download.html?mac=&m=e0&s=${sn}`
        }
      case Model.E0_88:
        switch (devVersion) {
          case DeviceVersion.China:
            return `https://h5.papazhua.com/pawzz/download.html?m=e0&s=${sn}`
          case DeviceVersion.Oversea:
            return `https://h5.papazhua.com/pawzz/download.html?m=e0&s=${sn}`
        }
    }
  }
)

function Home() {

  const [sn, setSn] = useAtom(snAtom)
  const [devVersion, setDevVersion] = useAtom(devVersionAtom)
  const qrCode = useAtomValue(qrCodeAtom)
  const [model, setModel] = useAtom(modelAtom)
  const searchParams = useSearchParams();

  useEffect(() => {
    const model = searchParams.get("model");
    const ver = searchParams.get("ver");
    const sn = searchParams.get("sn");
    if (model) {
      switch (model) {
        case Model.P0:
          setModel(Model.P0)
          break;
        case Model.P1:
          setModel(Model.P1)
          break;
      }

    }
    if (ver) {
      switch (ver) {
        case DeviceVersion.China:
          setDevVersion(DeviceVersion.China)
          break;
        case DeviceVersion.Oversea:
          setDevVersion(DeviceVersion.Oversea)
          break;
        default:
          break;
      }

    }
    if (sn) {
      setSn(sn)
    }
  }, [searchParams, setDevVersion, setModel, setSn]);

  return (
    <main className="flex flex-col items-center justify-between p-4">
      <div className="flex-1 flex flex-col items-center">
        <h5 className="my-4 self-start">提示: 输入设备SN, 即可生成皮克方设备二维码</h5>
        {qrCode && <QRCodeSVG size={256} value={qrCode} includeMargin={true} />}


        <Select value={model} onValueChange={(value) => {
          setModel(value as Model)
        }}>
          <SelectTrigger className="w-full mt-2">
            <SelectValue placeholder="选择产品型号" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value={Model.P0}>P0</SelectItem>
              <SelectItem value={Model.P1}>P1</SelectItem>
              <SelectItem value={Model.P3}>猫砂盆</SelectItem>
              <SelectItem value={Model.A3}>A3</SelectItem>
              <SelectItem value={Model.E0}>喂食器</SelectItem>
              <SelectItem value={Model.E0_88}>趴趴爪喂食器</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>

        <Select value={devVersion} onValueChange={(value) => {
          setDevVersion(value as DeviceVersion)
        }}>
          <SelectTrigger className="w-full mt-2">
            <SelectValue placeholder="选择版本" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value={DeviceVersion.China}>中国大陆版</SelectItem>
              <SelectItem value={DeviceVersion.Oversea}>国际版</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>


        <div className="mt-8 flex flex-col space-y-2 self-stretch">
          <Label htmlFor="sn">设备SN</Label>
          <Input id="sn"
            placeholder="请输入设备SN"
            className="min-w-64"
            autoFocus
            value={sn}
            type="text"
            onChange={e => setSn(e.target.value.trim().toUpperCase())} />
        </div>
      </div>
    </main>
  );
}


export default function HomeWrapper() {
  return (
    <Suspense>
      <Home />
    </Suspense>
  );
}
